<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>04.模拟微信聊天</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			ul {
				list-style: none;
			}
			
			img {
				vertical-align: top;
			}
			
			input,
			button {
				outline: none;
			}
			
			.wrap {
				width: 1000px;
				height: 800px;
				background: url(./images/weChatChat/bg.jpg) no-repeat;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-top: -400px;
				margin-left: -500px;
			}
			
			.iphone {
				width: 356px;
				height: 679px;
				background: url(./images/weChatChat/iphone.png) no-repeat;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -178px;
				margin-top: -338.5px;
			}
			
			.list {
				width: 318px;
				height: 498px;
				margin: 47px 0 0 19px;
				padding: 20px;
				overflow: auto;
				box-sizing: border-box;
			}
			
			.list li::after {
				content: '';
				display: block;
				clear: both;
			}
			
			.list img {
				width: 35px;
				height: 40px;
			}
			
			.list p {
				width: 210px;
				box-sizing: border-box;
				padding: 10px;
				border-radius: 10px;
			}
			
			.nav {
				height: 60px;
				background: #e5e5e5;
				width: 318px;
				margin-left: 19px;
			}
			
			.nav::after {
				content: '';
				display: block;
				clear: both;
			}
			
			.nav img {
				padding: 10px 0 0 16px;
				float: left;
			}
			
			.nav input {
				float: left;
				width: 190px;
				height: 40px;
				border: none;
				background: #fff;
				border-radius: 10px;
				margin: 11px 0 0 13px;
			}
			
			.nav button {
				width: 64px;
				height: 40px;
				font: 16px / 40px "微软雅黑";
				color: #e15671;
				margin-top: 11px;
				text-align: center;
				border: none;
				background: none;
			}
			
			.right,
			.left {
				margin-bottom: 20px;
			}
			
			.right img {
				float: right;
			}
			
			.right p {
				float: right;
				background: #bab3ce;
				color: #fff;
				margin-right: 13px;
			}
			
			.left img {
				float: left;
			}
			
			.left p {
				float: left;
				background: #e5e5e5;
				margin-left: 13px;
			}
		</style>
		<script>
			window.onload = function () {
				// 获取图片元素
				var oImg = document.getElementById("img1");
				// 获取用户input框输入的内容
				var oTxt = document.querySelector("#txt1");
				// 获取发送按钮元素
				var oSendBtn = document.getElementById("sendBtn");
				// 获取list列表元素
				var oList = document.querySelectorAll(".list")[0];
				
				// 我们在这里准备一个开关，来控制当前用户头像的切换效果
				// true -> 显示的是红图片 false -> 显示的是蓝图片
				var onOff = true;
				
				// 当点击头像的切换功能
				oImg.addEventListener("click", function () {
					// 点击头像切换功能
					if ( onOff ) {
						oImg.src = './images/weChatChat/monster.png';
					} else {
						oImg.src = './images/weChatChat/monster2.png';	
					}
					
					// 取反
					onOff = !onOff;	
				}, false);
				
				// 当点击发送按钮应该做的事
				oSendBtn.addEventListener("click", function () {
					// 判断如果input框，只有用户输入了内容之后才可以点击发送，不然提示用户必须输入
					if ( oTxt.value == '' || oTxt.value == null || oTxt.value == undefined ) {
						alert ( '亲，请输入点内容再点击发送哦！' );
					// input输入框内容不为空的时候，点击可以发送
					} else {
						// onOff为true表示红色，onOff为false表示蓝色
						if ( onOff ) {
							oList.innerHTML = '<li class="right"><img src="./images/weChatChat/monster2.png" alt="" /><p>' + oTxt.value + '</p></li>' + oList.innerHTML;
						} else {
							oList.innerHTML = '<li class="left"><img src="./images/weChatChat/monster.png" alt="" /><p>' + oTxt.value + '</p></li>' + oList.innerHTML;	
						}
						// 当输完东西发送完毕后将input输入框的值清空，等待下一次的输入
						oTxt.value = '';
					}
				}, false);
				
				/**
				 * 当用户停留在输完textarea框之后，相当于给用户一个便捷操作，通过
				 * 纯原生js的主动触发点击回车键就相当于用户点击了发送按钮一样
				 * 当然拉，用jQuery的trigger()主动触发方法那实现起来是太过于简单了，
				 * 挺好！
				 */
				oTxt.addEventListener("keydown", function (ev) {
					// 获取兼容的事件对象
					var oEvent = ev || window.event;
					// 判断如果用户按了回车键，那么开始执行以下操作
					if ( oEvent.keyCode == 13 ) {
						// 阻止下默认行为
						oEvent.preventDefault ();
						// console.log("您按了回车键，已触发！");
						var evObj = document.createEvent("MouseEvents");
						// 这里的click可以换成你想触发的行为mouseover mouseout等等
						evObj.initEvent ("click", true, true);
						// 这里的oSendBtn可以换成你想触发行为的DOM节点
						oSendBtn.dispatchEvent (evObj);
					}
				}, false);
			};
		</script>
	</head>
	<body>
		<div class="wrap">
			<div class="iphone">
				<ul class="list">
					<li class="right">
						<img src="./images/weChatChat/monster2.png" alt="" />
						<p>说：哈？好呀，多少钱我都愿意～～呵呵</p>
					</li>
					<li class="left">
						<img src="./images/weChatChat/monster.png" alt="" />
						<p>说：这个简单，我们去妙味远程课堂学就行啦～～～</p>
					</li>
					<li class="right">
						<img src="./images/weChatChat/monster2.png" alt="" />
						<p>说：好呀～～～你先帮我学会JS再说～～</p>
					</li>
					<li class="left">
						<img src="./images/weChatChat/monster.png" alt="" />
						<p>说：咦？土豪？？</p>
					</li>
					<li class="right">
						<img src="./images/weChatChat/monster2.png" alt="" />
						<p>说：大家好，我是土豪～</p>
					</li>
				</ul>
				<div class="nav">
					<img id="img1" src="./images/weChatChat/monster2.png" alt="" />
					<input id="txt1" type="text">
					<button id="sendBtn">发送</button>
				</div>
			</div>
		</div>
	</body>
</html>